<template>
  <!-- 这是图片列表页 -->
  <div class="imglist">
    <hmheader title="黑马程序员"></hmheader>
    <div class="connent">
      <!-- 栏目列表 -->
      <van-tabs v-model="active" sticky swipeable>
        <van-tab :title="value.title" v-for="value in imgList" :key="value.id">
          <!-- 图片数据 -->
          <div
            class="bbb"
            v-for="item in imgData"
            :key="item.id"
            @click="$router.push({ path:`/imgdetial/${item.id}` })"
          >
            <img :src="item.img_url" alt />
            <div class="box">
              <p style="font-weight: 700;">{{item.title}}</p>
              <p>{{item.zhaiyao}}</p>
            </div>
          </div>
          <!-- {{value.title}} -->
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getImgList, getliebiao } from "./../../apis/img/img";
import hmheader from "./../../components/hmheader.vue";
export default {
  components: {
    hmheader,
  },
  data() {
    return {
      active: 4,
      imgList: [],
      imgData: [],
    };
  },
  async mounted() {
    // 获取图片栏目信息（返回了一个标题和id）
    this.imgList = (await getImgList()).data.message;
    // console.log(this.imgList);
    // 改造数据
    this.imgList = this.imgList.map((v) => {
      return {
        ...v,
        // message:({ id:0,title:'全部' })
      };
    });
    this.imgList.unshift({ title: "全部", id: 0 });
    // console.log(this.imgList);

    // 获取栏目图文信息（需要传栏目id）
    this.imgData = (
      await getliebiao(this.imgList[this.active].id)
    ).data.message;
    // console.log(this.imgData);
    // console.log(this.imgData[this.active].id);
  },
  watch: {
    async active() {
      // console.log('111');
      if (this.active == 0) {
        this.imgData = (
          await getliebiao(this.imgList[this.active].id)
        ).data.message;
      }
      this.imgData = (
        await getliebiao(this.imgList[this.active].id)
      ).data.message;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab__text {
  color: blue;
  font-size: 18px;
  // margin-bottom: 60px;
}

.imglist {
  margin-bottom: 60px;
  .connent {
    .bbb {
      width: 100%;
      height: 300px;
      position: relative;
      // margin-top: 20px;
      img {
        display: block;
        width: 100%;
        height: 300px;
        // z-index: 1;
      }
      .box {
        height: 100px;
        width: 100%;
        color: #fff;
        // background-color:rgba(255, 255, 255, 0.2);
        // opacity: 0.8;
        position: absolute;
        top: 200px;
        left: 0px;
        p {
          margin-top: 10px;
          font-size: 15px;
          color: #fff;
          // word-spacing: 5px;
          line-height: 1.35;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
      }
    }
  }
}
</style>